<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            :buttons="['refresh']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('withdraw.quick Search Fields') })"
        >
<!--            <el-button v-blur class="table-header-operate" type="success" style="margin-left: 12px" @click="derive">-->
<!--                <Icon color="#ffffff" name="el-icon-success" />-->
<!--                <span class="table-header-operate-text">{{ t('批量审核') }}</span>-->
<!--            </el-button>-->
        </TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef"></Table>

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import createAxios from "/@/utils/axios";
import {AxiosPromise} from "axios";
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
    name: 'shop/user/withdraw',
})

const { t } = useI18n()
const tableRef = ref()
// const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'agreement',
        title: '同意',
        text: '同意',
        type: 'info',
        icon: '',
        class: 'table-row-edit',
        disabledTip: false,
        click: (row: TableRow) => {
            doCheck(row,20)
        },
        display: (row: TableRow, field: TableColumn) => {
            if( row.status == 10 ) return true;
            return false;
        },

    },
    {
        render: 'tipButton',
        name: 'refuse',
        title: '拒绝',
        text: '拒绝',
        type: 'danger',
        icon: '',
        class: 'table-row-edit',
        disabledTip: false,
        click: (row: TableRow) => {
            doCheck(row,40)
        },
        display: (row: TableRow, field: TableColumn) => {
            if( row.status == 10 ) return true;
            return false;
        },

    },
    'edit'
]
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/shop.user.Withdraw/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('shop.user.withdraw.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            { label: t('shop.user.withdraw.user_id'), prop: 'user_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            { label: t('shop.user.withdraw.user__nickname'), prop: 'user.nickname', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('shop.user.withdraw.amount'), prop: 'amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('shop.user.withdraw.before_amount'), prop: 'before_amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('shop.user.withdraw.after_amount'), prop: 'after_amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('shop.user.withdraw.status'), prop: 'status', align: 'center', render: 'tag', operator: 'eq', sortable: false, replaceValue: { '10': t('shop.user.withdraw.status 10'), '20': t('shop.user.withdraw.status 20'), '30': t('shop.user.withdraw.status 30'), '40': t('shop.user.withdraw.status 40') } },
            { label: t('shop.user.withdraw.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            { label: t('shop.user.withdraw.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            { label: t('shop.user.withdraw.reason'), prop: 'reason', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('shop.user.withdraw.remark'), prop: 'remark', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('shop.user.withdraw.account'), prop: 'account', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            {label: t('二维码'), prop: 'qrcode', align: 'center', render: 'image', operator: false},
            { label: t('shop.user.withdraw.account_name'), prop: 'account_name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('shop.user.withdraw.account_type'), prop: 'account_type', align: 'center',render: 'tag', operator: 'RANGE', sortable: false, replaceValue: { '1': t('shop.user.withdraw.account_type 1'), '2': t('shop.user.withdraw.account_type 2') } },
            { label: t('shop.user.withdraw.type'), prop: 'type', align: 'center',  render: 'tag',operator: 'eq', sortable: false,replaceValue: {'1': t('shop.user.withdraw.type 1')} },
            { label: t('shop.user.withdraw.data'), prop: 'data', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('shop.user.withdraw.withdraw_rate'), prop: 'withdraw_rate', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('shop.user.withdraw.received_amount'), prop: 'received_amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('shop.user.withdraw.out_biz_no'), prop: 'out_biz_no', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('shop.user.withdraw.order_id'), prop: 'order_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            { label: t('shop.user.withdraw.trans_date'), prop: 'trans_date', align: 'center', operator: 'eq', sortable: 'custom', width: 160 },
            { label: t('Operate'), align: 'center', width: 200, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: { user_id: null, amount: 0, before_amount: 0, after_amount: 0, status: '20', reason: null, remark: null},
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

const doCheck = (row,status) =>{
    ElMessageBox.confirm(
        '确定要'+ (status == '20' ? '同意':'拒绝')+'这个提现请求吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            createAxios<any, AxiosPromise>(
                {
                    url: 'admin/shop.user.Withdraw/edit',
                    method: 'POST',
                    data: {id:row.id,status:status},
                },
                { reductDataFormat: false }
            ).then((response) => {
                console.log(response)
                if ( response.data.code == 1 ){
                    ElMessage({ message: response.data.msg, type: 'success' })
                    baTable.onTableHeaderAction('refresh', {});
                    return false;
                }
                ElMessage({ message: t('joyComponents.goodsSpec.Keep at least one valid specification'), type: 'error' })
            })
        })
        .catch(() => {

        })

}
// const derive = () => {
//     createAxios<any, AxiosPromise>(
//         {
//             url: 'shop/user/withdraw/transfers',
//             method: 'get',
//             responseType: 'blob',
//         },
//         { reductDataFormat: false }
//     ).then((response) => {
//         alert('操作成功')
//         baTable.onTableHeaderAction('refresh', {})
//     })
// }
</script>

<style scoped lang="scss"></style>
